<template>
  <div class="baseBox">
    <div class="headerBox">
      <div class="topLeftBox">
        <SvgIcon
          class-name="rotateShow"
          icon-name="icon-jiantoushang"
          size="32px"
          @click="parentRoute()"
        ></SvgIcon>
        <SvgIcon icon-name="icon-jiantoushang" size="32px" @click="previousRoute()"></SvgIcon>
      </div>
      <div class="topCenterBox">
        <div class="topCenterLinkBox">
          <div class="topCenterLinkItem" @click="jumpRoute(RouterConstant.Home)">首页</div>
          <template v-for="(item, index) in linkListData" :key="index">
            <div class="">
              <SvgIcon icon-name="icon-zhixiang" size="28px"></SvgIcon>
            </div>
            <div class="topCenterLinkItem" @click="jumpRoute(item.path)">{{ item.meta.title }}</div>
          </template>
        </div>
        <div class="topCenterFlashBox">
          <SvgIcon iconName="icon-shuaxin" size="28px"></SvgIcon>
        </div>
      </div>
      <div class="topRightBox">
        <a-input-search
          v-model:value="value"
          placeholder="请输入搜索工具"
          enter-button
          :loading="loading"
          @search="onSearch"
          class="no-radius"
        />
      </div>
    </div>
    <div class="separateLine"></div>
    <div class="baseBodyBox">
      <router-view></router-view>
    </div>
  </div>
</template>

<script setup>
import { onMounted, ref } from 'vue'
import SvgIcon from '../../components/SvgIcon.vue'
import router from '../../router'
import RouterConstant from '../../components/constant/routerConstant'

const value = ref('')
const loading = ref(false)
const linkListData = ref([])

onMounted(() => {
  router.currentRoute.value.matched.forEach((item) => {
    if (item.meta && item.meta.title) {
      linkListData.value.push(item)
    }
  })
})

const parentRoute = () => {
  // 获取历史路由记录
  const history = router.options.history.state.back
  if (history) {
    router.push(history)
  } else {
    // 如果没有历史记录，跳转到首页
    router.push('/')
  }
}

const previousRoute = () => {
  const links = linkListData.value
  if (links) {
    if (links.length <= 1) {
      jumpRoute('/')
    } else {
      jumpRoute(links[links.length - 2].path)
    }
  }
}

const jumpRoute = (path) => {
  router.push(path)
}

const onSearch = () => {
  loading.value = true
  // 模拟搜索操作
  setTimeout(() => {
    loading.value = false
  }, 2000)
}
</script>

<style scoped>
.baseBox {
  padding: 10px;
  height: 100vh;
  display: flex;
  flex-direction: column;
}

.headerBox {
  margin-bottom: 25px;
  display: flex;
  height: 32px;
}

.topLeftBox {
  height: 32px;
}

.topLeftBox svg {
  border: white 1px solid;
}

.topLeftBox svg:hover {
  cursor: pointer;
  border: #d9d9d9 1px solid;
}

.topCenterBox {
  display: flex;
  flex-direction: row;
  align-items: center;
  flex: 1;
}

.topCenterLinkBox {
  display: flex;
  align-items: center;
  border: #d9d9d9 1px solid;
  border-right-style: none;
  padding-left: 10px;
  width: 100%;
  height: 32px;
}

.topCenterLinkBox .topCenterLinkItem:hover {
  cursor: pointer;
}

.topCenterFlashBox {
  border: #d9d9d9 1px solid;
  height: 32px;
}

.topCenterFlashBox :hover {
  cursor: pointer;
}

.topRightBox {
  width: 350px;
  margin-left: 12px;
  margin-right: 12px;
}

.rotateShow {
  transform: rotate(-90deg);
}

.separateLine {
  width: 100%;
  height: 1px;
  background-color: #d7e1ed;
}

.baseBodyBox {
  background-color: #f8f7fa;
  padding: 25px 50px 25px 50px;
  flex: 1;
}

.topRightBox :deep(.ant-input) {
  border-radius: 0 !important;
}
</style>
